<template>
  <el-dialog
      title="添加住宿需求"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleCheckClose">
    <el-form :model="form" label-position="top">
      <el-form-item label="选择楼栋">
        <el-radio-group v-model="form.build">
          <el-radio :label="type" v-for="(type,index) in types.build" :key="index">{{type.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择房型">
        <el-radio-group v-model="form.roomType">
          <el-radio :label="type" v-for="(type,index) in types.roomType" :key="index">{{type.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开房方式">
        <el-radio-group v-model="form.roomWay">
          <el-radio :label="type" v-for="(type,index) in types.type" :key="index">{{type.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="需求数量(间)">
        <el-input type="number" v-model="form.amount" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.other" style="width: 50%"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="checkSubmit">添 加</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  name: "AddAccNeedsDialog",
  props:{
    visible:Boolean,
  },
  emits:['submit','close'],
  data(){
    return{
      dialogVisible:false,
      form:{
        date:'',
        build: '',
        roomType: '',
        roomWay: '',
        amount: 1,
        other:'',
      },
      types:{
        build:[{
          id:1,
          name:'新综合楼'
        },{
          id:2,
          name:'培训楼'
        }],
        roomType:[{
          id:1,
          name:'单人间'
        },{
          id:2,
          name:'2人间'
        },{
          id:3,
          name:'4人间'
        }],
        type:[{
          id:1,
          name:'全日房'
        },{
          id:2,
          name:'钟点房'
        }],
      }
    }
  },
  watch:{
    visible(newValue){
      this.dialogVisible = newValue;
    }
  },
  methods:{
    handleCheckClose(){
      this.$emit('close');
    },
    checkSubmit(){
      this.$emit('submit',this.form);
      this.clear();
    },
    close(){
      this.$emit('close')
      this.clear()
    },
    clear(){
      this.form = {
        build: '',
        roomType: '',
        type: '',
        amount: 1,
        other:'',
      }
    },
    findAllBuild(){
      return axios.get(this.$host+"/build").then(response=>{
        if(response.data.code === 0){
          this.types.build = response.data.data;
        }
      })
    },
    findAllRoomType(){
      return axios.get(this.$host+"/build/roomtype").then(response=>{
        if(response.data.code === 0){
          this.types.roomType = response.data.data;
        }
      })
    },
    findAllRoomWay(){
      return axios.get(this.$host+"/build/roomway").then(response=>{
        if(response.data.code === 0){
          this.types.type = response.data.data;
        }
      })
    }
  },
  created() {
    Promise.all([this.findAllBuild(),this.findAllRoomType(),this.findAllRoomWay()])
  }
}
</script>

<style scoped>

</style>